import React, { forwardRef, useImperativeHandle } from 'react';
import { Form, Row, Col, Input, Switch } from 'antd';

import { getFormData } from '@/utils/utils';
import { formLayout } from '@/services/common';
import { formInitialData } from '@/services/CreateDs';
import { basicConfigRules } from './validateRules';

import OtherConfig from './OtherConfig';

const { Item: FormItem } = Form;
 
const BasicConfig: React.FunctionComponent<any> = forwardRef((props, ref) => {

  const [form] = Form.useForm();

  // 抛出属性
  useImperativeHandle(ref, () => ({
    // form: props.form || {},
    getFormValues: () => getFormValues(),
  }));

  const getFormValues = () => {
    const fromData = getFormData(form, true);
    return fromData;
  };
  
  return (
    <Form form={form} name='ds-config-form' autoComplete='off' initialValues={formInitialData}>
      <Row gutter={24}>
        <Col span={8}>
          <FormItem {...formLayout} label='DS名称' name='dsName' rules={basicConfigRules.dsName} tooltip='只需要填写名称部分, 默认: list'>
            <Input />
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem {...formLayout} label='多语言前缀' name='intlPrefix' rules={basicConfigRules.intlPrefix} tooltip='默认: hzero.common'>
            <Input />
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={8}>
          <FormItem {...formLayout} label='查询接口API后缀' name='readUrl' rules={basicConfigRules.url} tooltip='默认: read'>
            <Input />
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem {...formLayout} label='提交接口API后缀' name='submitUrl' rules={basicConfigRules.url} tooltip='默认: 不生成提交接口'>
            <Input />
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem {...formLayout} label='删除接口API后缀' name='destroyUrl' rules={basicConfigRules.url} tooltip='默认: 不生成删除接口'>
            <Input />
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={8}>
          <FormItem {...formLayout} label='是否自动查询' name='autoQuery' help='' tooltip='默认: 不自动查询(对应autoQuery字段)' valuePropName='checked'>
            <Switch checkedChildren='是' unCheckedChildren='否' />
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem {...formLayout} label='是否分页' name='paging' help='' tooltip='默认: 不分页(对应paging字段), 还用于判断生成额外表格(true)|表单(false)配置文件' valuePropName='checked'>
            <Switch checkedChildren='是' unCheckedChildren='否' />
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem {...formLayout} label='是否可以勾选' name='selection' help='' tooltip='默认: 不可以勾选(对应selection字段)' valuePropName='checked'>
            <Switch checkedChildren='是' unCheckedChildren='否' />
          </FormItem>
        </Col>
      </Row>
      <OtherConfig form={form} />
    </Form>
  );
})
 
export default BasicConfig;
